import React,{ useState } from 'react'
import { Input, Cell, Button } from 'react-vant';
import './register.css'
import { Dosendmsgcode, Docheckcode } from '../../axios';
import { useLocation, useNavigate } from 'react-router-dom';
export default function Step2(props) {
  let localtion = useLocation()
  let navigate = useNavigate()
  let [disabled,setDisabled]=useState('')
  let [time,setTime]=useState(5); //倒计时的时间
  let [telcode,setTelcode] = useState('')

 
  // console.log(localtion.pathname);
  const res = () => {
    // console.log(telcode);
    Docheckcode({telcode:telcode,tel:localtion.pathname.split('/').pop()}).then(res => {
      console.log(res);
      if(res.data.code === '200'){
        navigate('/register/step3/'+localtion.pathname.split('/').pop())
      }
    })
  }
  const yzm = () => {
    Dosendmsgcode({tel:localtion.pathname.split('/').pop()}).then(res => {
        console.log(res);
        if(res.data.code === '200'){
          cutDown();
        }
    })
  }
  let timer =null; 
  const cutDown=()=>{ //倒计时 
      if(time===0){
         setTime(5);  //时间设置为5秒
         setDisabled(''); //按钮可以用
         clearTimeout(timer);
      }
      else{
        setDisabled('disabled')
        time--;
        setTime(time);
        timer=setTimeout(()=>{
            cutDown();
        },1000)
      }
  }
  const input = (value) => {
    setTelcode(value)
  }
  // console.log(telcode.length);
  return (
    <div className='res-box-2'>
      <Cell>
      <Input
        prefix="短信验证码"
        suffix={<Button disabled={disabled} size="small" type="primary" onClick={yzm}>{time===5?'发送短信验证码':time+'秒之后再发送'}</Button>}
        placeholder="请输入短信验证码"
        value={telcode}
        onChange={(value) => input(value)}
      />
    </Cell>

    <Button disabled={telcode.length < 5 ? 'disabled' : ''} className='res-btn' block type='submit' size='large' onClick={res}>下一步</Button>
    </div>
  )
}
